<template>
  <div class="container flex-column">
    <div class="page-header">
      <van-cell
        title="我加入的"
        label="点击可查看全部记工本"
        :border="false"
        custom-class="cell-headmenu"
        center
      >
        <div class="cell-headmenu__item">
          <van-icon name="home-o" />
          <view class="cell-headmenu__item-text">首页</view>
        </div>
      </van-cell>
    </div>
    <div class="page-books">
      <swiper
        :indicator-dots="accountBooks.length>1"
        previous-margin="30px"
        next-margin="30px"
        class="swiper-corner swiper-books"
      >
        <swiper-item
          v-for="(book,index) in accountBooks"
          :key="index"
          class="swiper-corner-item"
        >
          <view class="swiper-item">
            <note-book
              :title="book.title"
              :label="book.headman"
              :label-text="bookPrefixText.label"
              :date-text="bookPrefixText.date"
              :member-count-text="bookPrefixText.memberCountUnit"
              :date="book.createdTime"
              :member-count="book.memberCount"
              :members="book.recommendMembers"
              :actions="book.actions"
              :cover="bookCover"
              action-icon="setting-o"
              @action="onBookSetting"
              @reload="onReloadPage"
            >

              <view class="work-man">
                <van-cell
                  :title="user.username"
                  :icon="user.avatar"
                  center
                  custom-class="work-man__cell"
                >
                  <van-button
                    type="noborder"
                    plain
                    icon="bell"
                    round
                    size="small"
                  >消息</van-button>
                </van-cell>
                <view class="work-man__stats">
                  <view>
                    <view class="work-man__stats-text">
                      <text class="work-man__stats-text-label">总工钱：</text>
                      <text class="work-man__stats-text-currency text-info">{{book.worker.BALANCE_IN}}</text>
                    </view>
                    <view class="work-man__stats-text">
                      <text class="work-man__stats-text-label">已收款：</text>
                      <text class="work-man__stats-text-currency text-primary">{{book.worker.BALANCE_OUT}}</text>
                    </view>
                    <view class="work-man__stats-text">
                      <text class="work-man__stats-text-label">未结算：</text>
                      <text class="work-man__stats-text-currency text-warning">{{book.worker.BALANCE_IN-book.worker.BALANCE_OUT}}</text>
                    </view>
                  </view>
                  <van-button
                    type="info"
                    size="small"
                    round
                  >记工</van-button>
                </view>
              </view>
              <view class="work-rank">
                <van-button
                  :icon="rankIcon"
                  round
                  plain
                  custom-class="book-button"
                >
                  <view>记工本排行榜</view>
                </van-button>
              </view>
            </note-book>
          </view>
        </swiper-item>
        <swiper-item
          v-if="!accountBooks.length"
          class="swiper-corner-item"
        >
          <view class="swiper-item">
            <note-book
              custom-class="note-empty"
              use-empty-slot
            >
              <van-grid
                column-num="1"
                icon-size="60px"
                :border="false"
                slot="empty"
              >
                <van-grid-item
                  :icon="defaultBook.icon"
                  link-type="navigateTo"
                  :url="defaultBook.url"
                  @click="onDefaultClick"
                >
                  <view
                    slot="text"
                    class="book-item"
                  >
                    <view class="book-item-title">
                      {{defaultBook.text}}
                    </view>
                    <van-icon name="arrow" />
                  </view>
                </van-grid-item>
              </van-grid>
            </note-book>
          </view>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import { getIntrantBookApi } from '@/api'
import MPRequest from '@/utils/request'
export default {
  components: {
  },

  data () {
    return {
      showAction: false,
      user: null,
      uncleared: 500,
      bookPrefixText: {
        label: '班组长：',
        date: '创建时间：',
        memberCountUnit: '人'
      },
      rankIcon: '/static/icons/rankboard.png',
      bookCover: '/static/images/book-cover.png',
      menus: [
        {
          id: 2,
          title: '今年收入（元）',
          icon: 'http://oss.youmbe.com/mp/icons/selected.png',
          description: '300,000',
          cover: 'http://oss.youmbe.com/mp/cover/run.png',
          link: ''
        },
        {
          id: 1,
          title: '本月收入（元）',
          icon: 'http://oss.youmbe.com/mp/icons/board.png',
          description: '0',
          cover: 'http://oss.youmbe.com/mp/cover/marathon.png',
          link: ''
        }
      ],

      actions: [],
      categorys: [
        {
          id: 1,
          title: '总工钱（元）',
          description: '30000000'
        },
        {
          id: 2,
          title: '今日记工（人）',
          description: '0'
        }
      ],
      accountBooks: [],
      defaultBook: {
        icon: '/static/icons/noteadd.png',
        text: '创建新记工本',
        url: '/pages/form/book/main'
      }
    }
  },
  beforeMount () {
  },
  onShow () {
    const userData = mpvue.getStorageSync('mine')
    console.log('用户登录信息：', userData)
    if (userData) {
      this.user = userData
    }
    this.onLoadIntrantBooks()
  },
  watch: {

  },
  computed: {

  },
  mounted () {
    // 创建节点选择器
    var query = wx.createSelectorQuery()
    // 选择id
    query.select('#test').boundingClientRect()
    query.exec(function (res) {
      // res就是 所有标签为mjltest的元素的信息 的数组
      console.log('event/index mounted', res)
    })
  },
  onLoad (option) {
    console.log(option)
    console.log('小程序 [page-blog] 生命周期: onLoad: 监听页面加载')
  },
  methods: {
    onReloadPage (e) {
      console.log(e)
      let that = this
      that.onLoadIntrantBooks()
    },
    onDefaultClick (e) {
      console.log('onDefaultClick', e)
    },
    // 滚动切换标签样式
    switchTab (e) {
      console.log(e.mp)
    },
    onBookSetting (e) {
      console.log(e)
      const item = e.mp.detail
      if (item.link) {
        this.pushNativelink(item.link)
      } else if (item.confirm) {
        wx.showModal({
          title: '提示',
          content: item.confirm.message,
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定')
              if (item.confirm.request) {
                this.onRequestApi(item.confirm.request)
              }
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    },
    onRequestApi (data) {
      console.log(data)
      const {method, url, params} = data
      MPRequest.request(method, url, params).then(res => {
        console.log(res)
        this.$emit('reload', true)
      })
    },
    // 获取班组记工本
    onLoadIntrantBooks () {
      console.log('teambooks onLoad')
      getIntrantBookApi().then(res => {
        this.accountBooks = res
      })
    }
  }
}
</script>

<style lang="less">
.page-header {
  background: #6799ff;
  padding: 10px 0;
  .cell-headmenu {
    background: transparent !important;
    .van-cell__title {
      font-size: 24px;
      color: #fff;
    }
    .van-cell__label {
      color: rgba(255, 255, 255, 0.5);
    }
    .van-cell__value {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: rgba(255, 255, 255, 0.9);
      margin-left: 15px;
      padding: 0 10px;
      .van-icon {
        font-size: 26px;
      }
      &-text {
        font-size: 12px;
      }
    }
  }
}

.page-books {
  padding: 20px 0;

  .book-item {
    &-title {
      font-size: 12px;
    }
    &-content {
      margin-top: 8px;
      color: #000;
      font-size: 18px;
      .van-icon {
        color: #000;
      }
    }
    &-desc {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .book-button {
    &__desc {
      font-size: 10px;
      color: #eeeb2a;
    }
  }
  .note-book-body {
    padding-top: 0;
    padding-bottom: 0;
    justify-content: space-around;
    .van-grid-item__content {
      padding: 8px !important;
    }
  }
  .account-uncleared {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border-top: 1px dashed #edeef0;
    border-bottom: 1px dashed #edeef0;
    margin-bottom: 10px;

    &__title {
      line-height: 1;
    }
    &__value {
      line-height: 1;
      color: #6799ff;
    }
    .van-icon {
      font-size: 12px;
    }
  }
}

.work-man {
  background: #f7f7fa;
  border-radius: 8px;
  &__cell {
    background: #ecf3fb !important;
    border-radius: 8px 8px 0 0 !important;
    // padding: 5px 16px 5px 56px !important;
    padding: 8px 10px !important;
    box-shadow: 0 10px 10px rgba(85, 85, 85, 0.05);
    .van-cell__title {
      font-size: 16px;
      font-weight: bold;
    }
    .van-cell__left-icon-wrap {
      margin-right: 10px;
      .van-icon--image {
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        image {
          border-radius: 50% !important;
        }
      }
    }
  }
  &__stats {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-text {
      display: flex;
      align-items: center;
      padding: 3px 0;
      text {
        line-height: 1;
      }
      &-label {
        font-size: 12px;
      }
      &-currency {
        font-weight: bold;
        font-family: "Courier New", Courier, monospace;
      }
    }
  }
  &__user {
    text-align: center;
    image {
      width: 44px;
      height: 44px;
      border-radius: 44px;
    }
  }
}
.work-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    .van-icon--image {
      width: 24px;
      height: 24px;
    }
    &__icon + &__text:not(:empty),
    &__loading-text {
      margin-left: 5px;
    }
  }
}

.note-book-empty {
  .van-grid-item__content {
    padding: 0 !important;
  }
  .van-grid-item__icon {
    height: auto !important;
  }
  .book-item {
    margin-top: 30px;
    display: flex;
    align-items: center;
    color: #969799;
    &-title {
      font-size: 14px;
    }
  }
}
</style>
